/*元素选择器,直接用元素来定义*/
/*类选择器，直接用类名，前面加.*/
/*类名不要写简写，不要随便写*/
/*.a{*/
/*    background-color: red;*/
/*}*/
/*.b{*/
/*    background-color: blue;*/
/*}*/
/**号理解为通配符，所有的元素都能得到*/


.content {
    width: 1000px;
    /*背景颜色*/
    /*background-color: blue;*/
    /*边框*/
    /*border: 1px solid red;*/
    /*margin: auto;*/
    /*display: flex;*/
}


.top {
    background-image: url("../img/banner_qtah.jpg");
    /*width: 1920px;*/
    width: 1000px;
    height: 550px;
    /*能不能用比例的形式来做*/
    /*height: calc(1000px * 808 / 1920);*/
    background-size: 100% 100%;
    color: white;
}

/*子选择器*/
/*想要谁居中，就在它外面的div设置display，自己一定要设置宽度*/
.top > div {
    display: flex;
    justify-content: center;
}

.top > div > div {
    width: 900px;
}

.top > div:nth-child(1) > div {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

/*命名的时候：按功能命名*/
.logo {
    height: 141px;
}

.top > div:nth-child(1) > div > div:nth-child(1) {
    height: 141px;
}

.top > div:nth-child(1) > div > div:nth-child(2) {
    display: flex;
    align-items: center;
}

.top > div:nth-child(1) > div > div:nth-child(2) > div {
    margin: 5px;
}

/*------------导航-------------------------*/
/*怎么得到颜色？
1.ui设计师已经给你了
2.打开ps，用吸管去吸
3.用第三方软件
*/
.nav {
    /*background-color: #E59037;*/
    background-color: rgb(230, 145, 55);
    height: 50px;
    line-height: 50px;
}

.nav > div {
    display: flex;

}

.nav > div > div {
    /*margin: 0 20px;*/
    padding: 0 20px;
}

/*伪类*/
.nav > div > div:hover {
    background-color: white;
    color: rgb(230, 145, 55);
    cursor: pointer;
}

/*---------------广告-------------*/
.ad > div {
    /*border: 1px solid red;*/
}

.ad > div > div:nth-child(1) {
    font-size: 50px;
    display: flex;
    /*上右下左*/
    margin: 30px 0 10px 0;
}

.ad > div > div:nth-child(1) > div:nth-child(2) {
    margin: 0 20px;
}

.ad > div > div:nth-child(2) {
    font-size: 10px;
}

.ad > div > div:nth-child(2) > div {
    /*margin: 5px 0;*/
    /*行高*/
    line-height: 20px;
}

.ad > div > div:nth-child(3) {
    font-size: 30px;
    color: rgb(230, 145, 55);
}

.ad > div > div:nth-child(3) > div:nth-child(1) {
    display: flex;
    align-items: flex-end;
}

/*.ad > div > div:nth-child(3)>div:nth-child(1)>div:nth-child(1),.ad > div > div:nth-child(3)>div:nth-child(1)>div:nth-child(3){*/
/*    font-size: 20px;*/
/*    color: white;*/
/*}*/
/*odd奇数，even偶数*/
/*.ad > div > div:nth-child(3)>div:nth-child(1)>div:nth-child(even){*/
/*        font-size: 20px;*/
/*        color: white;*/
/*}*/
pw {
    font-size: 20px;
    color: white;
}

sh {
    margin-right: 20px;
}
